<template>
 <div>
 <div align="center">
    <form name="form1" action="" method="" target="">
      <div style="display:none;">&nbsp;</div>
      <table class="content_report" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <td align="center">
              <br>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td width="160" class="reportSmallNormal">&nbsp;</td>
                    <td align="center" style="font-family:Arial;font-size:12pt;font-weight:bold;">
                      <div>收款報表</div>
                    </td>
                    <td width="200" class="reportSmallNormal" align="right">
                      <div>列印日期: {{ time }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
          <tr>
            <td align="center">
              <table border="0" cellpadding="2" cellspacing="0">
                <tbody>
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">加入日期:</td>
                    <td class="reportSmallNormal" align="left" valign="top">
                      {{ obj.time && obj.time.length > 1 ?
                          `${obj.time[0]}至${obj.time[1]}` : `所有`
                      }}
                    </td>
                    <td width="20" class="reportSmallNormal" align="left" valign="top"></td>
                    <td class="reportSmallNormal" align="left" valign="top">員工:</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ obj.admin_name ?obj.admin_name : '所有' }}</td>
                    <td width="20" class="reportSmallNormal" align="left" valign="top"></td>
                    <!-- <td class="reportSmallNormal" align="left" valign="top">課程總數:</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ course_total }}</td> -->
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <table width="1500" border="0" cellpadding="2" cellspacing="0" style="table-layout:fixed;">
                <colgroup>
                  <col width="100"><!-- 日期 -->
                  <col width="100"><!-- 分校 -->
                  <col width="100"><!-- 發票編號 -->
                  <col width="100"><!-- 學生編號 -->
                  <col width="100"><!-- 學生名稱 -->
                  <col width="100"><!-- 發票金額 -->
                  <col width="100"><!-- 已收 -->
                  <col width="100"><!-- 退款 -->
                </colgroup>
                <thead>
                  <tr>
                     <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">日期</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">分校</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">收據編號</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">相關發票</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">學生編號</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">學生名稱</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">收款方式</td>
                    <td class="reportSmallNormal" align="left" style="border-bottom:1px solid Black;">收款</td>
                  </tr>
                </thead>
                <tbody v-for="(item, index) in list" :key="index">
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.create_time }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.school.name }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.number }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.invoice_number }} </td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.student_number }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.student_name }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.paytype.name }}</td>
                    <td class="reportSmallNormal" align="left" valign="top">{{ item.money }}</td>
                  </tr>
                </tbody>
                        <td align="center">
              <table width="1000" border="0" cellpadding="2" cellspacing="0" style="table-layout:fixed;">
                <tbody>
                  <tr>
                    <td class="reportSmallNormal" align="left"></td>
                    <td class="reportSmallNormal" align="right">總單數:</td>
                    <td class="reportSmallNormal" align="right"
                      style="border-top:1px solid Black;border-bottom:1px solid Black;">{{total}}</td>
                    <td class="reportSmallNormal" align="left"></td>
                    <td class="reportSmallNormal" align="left"></td>
                    <td class="reportSmallNormal" align="left"></td>
                    <td class="reportSmallNormal" align="left"></td>
                    <td class="reportSmallNormal" align="right">總計:</td>
                    <td class="reportSmallNormal" align="right"
                      style="border-top:1px solid Black;border-bottom:1px solid Black;">{{totalMoney}}</td>
                  </tr>
                </tbody>
              </table>
            </td>
            <tr>
    
          </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td align="center">
              <br>
              <span class="reportSmallNormal">*** 報表完 ***</span>
            </td>
          </tr>
          <tr>
            <td align="center">&nbsp;</td>
          </tr>
  
        </tbody>
      </table>
    </form>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive,onMounted, watch, computed} from 'vue'
import {getTime} from '@/common/function.js'
const time = ref('')


const props = defineProps({
    list:Object,
    obj:Object,
    total:[String,Number]
})
const tableData = ref([])
watch(()=>props.list,(newval)=>{
tableData.value = newval
})
const totalMoney = computed(()=>tableData.value.reduce((prev, cur) => prev + cur.money*1, 0))

const obj = ref([])
obj.value = props.obj

onMounted(() => {
    time.value = `${getTime().nowDate} ${getTime().nowTime}`
})




</script>

<style scoped lang='less'>
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

.reportSmallBoldNormal {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
}

.reportSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
</style>